<script setup>
import {http} from "@/api";
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {useStore} from "vuex";
const route = useRoute()
const id = ref(route.params.id)
const detail = ref({
  category: {
    name: ''
  }
})
http.ProductList.read(id.value).then(res => {
  detail.value = res.data
})
const count = ref(1)
const countAdd = () => {
  count.value++
}
const countMinus = () => {
  if (count.value > 1) {
    count.value--
  }
}
const dialogVisible = ref(false)
const buy = () => {
  dialogVisible.value = true
}
const activeAddressId = ref('')
const addressList = ref([])
const store = useStore()
http.Address.list({
  user_id: store.getters.userInfo.id
}).then(res => {
  addressList.value = res.data
})
const dialogVisible2 = ref(false)
const addressForm = ref({
  id: undefined,
  username: '',
  phone: '',
  address: '',
  code: ''
})
const rules = ref({
  username: [
    { required: true, message: '请输入收货人', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入门牌号', trigger: 'blur' }
  ]
})
const addressFormRef = ref(null)
const submitAddress = () => {
  if (activeAddressId.value) {
    http.Address.update({
      ...addressForm.value,
      user_id: store.getters.userInfo.id
    }).then(res => {
      dialogVisible2.value = false
      http.Address.list({
        user_id: store.getters.userInfo.id
      }).then(res => {
        addressList.value = res.data
      })
    })
  } else {
    http.Address.create({
      ...addressForm.value,
      user_id: store.getters.userInfo.id
    }).then(res => {
      dialogVisible2.value = false
      http.Address.list({
        user_id: store.getters.userInfo.id
      }).then(res => {
        addressList.value = res.data
      })
    })
  }
}
const editAddress = (item) => {
  dialogVisible2.value = true
  addressForm.value = item
  activeAddressId.value = item.id
}
const addAddress = () => {
  dialogVisible2.value = true
  addressForm.value = {
    id: undefined,
    username: '',
    phone: '',
    address: '',
    code: ''
  }
  activeAddressId.value = ''
}
const pay = () => {
  if (!activeAddressId.value) {
    ElMessage.error('请选择收货地址')
    return
  }
  http.ProductOrder.create({
    user_id: store.getters.userInfo.id,
    address_id: activeAddressId.value,
    goods: [
      {
        id: detail.value.id,
        count: count.value
      }
    ]
  }).then(res => {
    dialogVisible.value = false
    dialogVisible2.value = false
    ElMessage.success('下单成功')
  })
}
</script>

<template>
<!--  购物支付页面 -->
<el-dialog title="支付页面" v-model="dialogVisible" width="1000px">
  <div class="address-header">
    婚礼地址
  </div>
  <div class="address-list">
    <div :class="['address-item', item.id === activeAddressId ? 'active' : '']" v-for="item in addressList" @click="activeAddressId = item.id">
      <div class="address-info">
        <div class="name">
          {{ item.username}}
          <span style="color: rgb(176, 176, 176);"></span>
        </div>
        <div class="tel">{{ item.phone }}</div>
        <div class="address-con">
          {{ item.address }}
        </div>
        <div class="address-action" @click="editAddress(item)">
          <span >修改</span>
        </div>
      </div>
    </div>
    <div class="address-item" @click.stop="addAddress(item)">
      <div class="add-desc" ><i class="iconfont iconfont-plus"></i><span>添加新地址</span></div>
    </div>
  </div>
  <div class="address-header">
    商品信息
  </div>
  <div class="f-r a-c j-b">
    <div class="f-r a-c ">
      <el-image style="height: 150px" :src="detail.image"></el-image>
      <div style="margin-left: 10px">{{ detail.name }}</div>
    </div>
    <div class="f-r a-c ">
      <div>{{ detail.price }}元</div>
      <div>x {{ count }}</div>
    </div>
  </div>
  <div class="f-r a-c f-e" style="margin-top: 20px">总计：{{ detail.price * count }}元</div>
  <div style="margin-top: 20px;" class="f-r a-c f-e">
    <div class="pay-btn" @click="pay">立即下单</div>
  </div>

</el-dialog>
  <el-dialog title="地址" v-model="dialogVisible2" width="600px">
    <el-form :model="addressForm" :rules="rules" ref="addressFormRef" label-width="100px">
      <el-form-item label="联系人" prop="username">
        <el-input v-model="addressForm.username"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="addressForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="addressForm.address"></el-input>
      </el-form-item>
      <el-form-item label="门牌号" prop="code">
        <el-input v-model="addressForm.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAddress">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <PageMain title="婚庆套餐详情">
    <div class="detail">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-image :src="detail.image" style="width: 100%"></el-image>
        </el-col>
        <el-col :span="12">
          <div class="p-detail2">
            <div class="p-name2">{{ detail.name }}</div>
            <div class="p-desc2">{{ detail.category.name }}</div>
            <div class="p-price2">
              <span style="font-size:12px">¥</span>
              {{ detail.price }}
            </div>
            <div class="p-sale2">
              销量：{{ detail.sale_count }}
            </div>
            <div class="btn-box">
              <div class="count-box">
                <div class="count-btn1" @click="countMinus">-</div>
                <div class="count-num">{{ count }}</div>
                <div class="count-btn2" @click="countAdd">+</div>
              </div>
              <div class="btn1" @click="buy">立即购买</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="detail" v-html="detail.remark">

    </div>
  </PageMain>
</template>

<style scoped lang="scss">
.address-header{
  margin: 0 0 20px;
  color: #333;
  font-size: 18px;
  line-height: 20px;
}
.pay-btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;    background: #ff6700;
  border-color: #ff6700;
  color: #fff;

}
.address-list {
  .address-item {
    display: inline-block;
    width: 268px;
    height: 178px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    position: relative;
    margin-right: 17px;
    margin-bottom: 20px;
    vertical-align: top;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    .address-info {
      line-height: 22px;
      color: #757575;
      padding: 15px 24px 0;
      .name {
        font-size: 18px;
        color: #333;
        line-height: 30px;
        margin-bottom: 10px;
      }
      .tel {
        line-height: 22px;
        color: #757575;
      }
      .address-con {
        line-height: 22px;
        color: #757575;
      }
    }
    .address-action {
      text-align: right;
      position: absolute;
      right: 24px;
      bottom: 10px;
      opacity: 1;
      color: #ff6700;
      margin-left: 10px;
    }
    .add-desc {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
      color: #b0b0b0;
    }
  }
  .address-item.active {
    border-color: #ff6700;
    background-color: #f1c3a4;
  }
}
.detail {
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.p-detail2{
  padding:0 20px;
  background-color: #fff;
  border-radius: 10px;
  .p-name2 {
    font-size: 26px;
    margin-bottom: 10px;
  }
  .p-desc2 {
    font-size: 16px;
    color: #999;
    margin-bottom: 10px;
  }
  .p-price2 {
    color: #ff264aff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .p-sale2 {
    color: #999;
    font-size: 16px;
  }
  .btn-box {
    display: flex;
    align-items: center;
    margin-top: 40px;
    .btn1 {
      margin-left: 20px;
      width: 115px;
      height: 40px;
      line-height: 40px;
      display: inline-block;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      background: #f83244;
      border-radius: 100px;
      color: #fff;
    }
  }
  .count-box{
    display: flex;
    align-items: center;
    .count-btn1,.count-btn2{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #f5f5f5;
      cursor: pointer;
    }
    .count-num{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #f5f5f5;
    }
  }
}
</style>
